<template>
  <div class="friend-links">
    <ul class="links-list">
      <li v-for="link in links" :key="link.name">
        <a :href="link.url" target="_blank">
          <img :src="link.imgUrl" alt="" class="link-img">
          <span class="link-text">{{ link.name }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        { name: '超星学习通', url: 'http://www.chaoxing.com/', imgUrl: 'http://ie.hbue.edu.cn/_upload/article/images/78/4f/79a573544d56a0299a8593123b7d/b5633ddd-a0a5-46a3-a37b-45acdb67cf8a_s.png' },
        { name: '校友帮', url: 'https://wwww.xybsyw.com/common.html#/personalHome', imgUrl: 'http://ie.hbue.edu.cn/_upload/article/images/4c/40/6aaea7dd462d97043f5c76264ad4/263b7b0f-d911-4fea-8892-b89531096232_s.png' },
        { name: '微信', url: 'https://weixin.qq.com/', imgUrl: 'https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico' }
      ]
    }
  }
}
</script>

<style scoped>
.friend-links {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 1rem;
  font-weight: bold;
}

.links-list {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.links-list li {
  
  list-style: none;
  margin-right: 1rem;
}

.links-list li:last-child {
  margin-right: 0;
}

.links-list a {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.link-img {
  width: 80px;
  height: 80px;
  margin-right: 5px;
}

.link-text {
  color:rgb(25, 176, 236);
  font-size: 1.5rem;
}
</style>
